<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>新建数据链路</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="./style/admin.css" th:href="@{/style/admin.css}" media="all">
    <link rel="stylesheet" href="./style/myself.css" th:href="@{/style/myself.css}" media="all">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
    <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
    <![endif]-->
    <script type="text/javascript" charset="utf-8" th:inline="javascript">
        let ctxPath = /*[[@{/}]]*/'';
    </script>
</head>
<body>
<div>
    <div id="divId" style="height:calc(100vh - 50px); width: 100%;"></div>

    <div style="margin-left: 35%; margin-top: 5px">
        <button type="button" class="layui-btn layui-btn-danger" style="width: 20%">
            <i class="layui-icon layui-icon-radio layui-font-15"></i>
            停止
        </button>
        <button type="button" class="layui-btn" style="width: 20%">
            <i class="layui-icon layui-icon-play layui-font-12"></i>
            启动
        </button>
    </div>
</div>

<script src="./js/common.js" th:src="@{/js/common.js}" charset="utf-8"></script>
<script src="./js/jquery.min.js" th:src="@{/js/jquery.min.js}" charset="utf-8"></script>
<script src="./js/jquery.base64.js" th:src="@{/js/jquery.base64.js}" charset="utf-8"></script>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script charset="utf-8" th:inline="javascript" type="module">
    layui.config({
        base: ctxPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'element', 'layer'], function () {
        let form = layui.form;
        form.render();
    });

    // 替换成实际路径
    import {Stage, Layer, Node, Link, Tooltip, PopupMenu, Shape, FoldLink, randomColor,
        AutoFoldLink, BezierLink, ArcLink, CurveLink, RatioNode, VideoNode, TextNode, CircleNode}
        from '../../phoenix-ui/lib/phoenix/core.js';

    let stage = new Stage('divId');
    let jtopoLayer = new Layer();
    stage.addChild(jtopoLayer);

    let nodes = [];
    let links = [];

    function createNode(x, y, img, name, text) {
        let node = new Node(name);
        node.setImage(img, true);
        //设置node坐标，宽高
        if(x == 0 && y == 0){
            x = -400
            y = -200
        }
        node.translate(x, y);
        node.resizeTo(50, 50);

        // 鼠标指向小提示
        let tooltip = new Tooltip(stage);
        tooltip.setHtml(text);

        //设置悬浮显示内容
        node.on('mousemove', function () {
            let input = stage.inputSystem;
            tooltip.showAt(input.x, input.y);
        });

        nodes.push(node);
        JtopoRender()
        console.log("完成创建")
    }

    function linkNode(nodeA, nodeZ, text, linkType, linkColor, effects) {
        console.log("开始连线")
        let link = new Link(text,nodeA,nodeZ);
        if(linkType === 'AutoFoldLink'){
            link = new AutoFoldLink(text,nodeA,nodeZ);
        }
        if(linkType === 'CurveLink'){
            link = new CurveLink(text,nodeA,nodeZ);
        }
        if(linkType === 'ArcLink'){
            link = new ArcLink(text,nodeA,nodeZ);
        }
        if(linkType === 'BezierLink'){
            link = new BezierLink(text,nodeA,nodeZ);
        }
        link.css({
            'lineWidth': 2,
            strokeStyle: linkColor
        });

        //设置箭头
        link.setBegin(nodeA, 'rm');
        link.setEnd(nodeZ, 'lm');
        let endArrow = new Node;
        endArrow.resizeTo(12, 12);
        endArrow.setShape(Shape.Polygon(3));
        endArrow.css({
            lineWidth: 1,
            strokeStyle: linkColor
        });
        link.setEndArrow(endArrow);

        // 给link，增加’流动特效'
        if(effects === '1'){
            stage.effectSystem.flow(link, { lineDash: [8, 2] }).play();
        }

        links.push(link);
        JtopoRender()
        console.log("连线完成")
    }

    function getNode(name){
        for (let k = 0; k < nodes.length; k++) {
            if(nodes[k]._text == name){
                console.log("getNode 获取到节点:" + nodes[k]._text)
                return nodes[k]
            }
        }
    }

    function JtopoRender(){
        jtopoLayer.addChilds(nodes);
        jtopoLayer.addChilds(links);
        stage.show();
    }

    setTimeout(function () {
        // 假设你的 Stage 对象叫做 stage，你想删除的 Layer 对象叫做 layerToRemove
        for(let i = stage.children.length - 1; i >= 0; i--){
            console.log("0000")
            if(stage.children[i] === jtopoLayer){
                console.log("1111")
                stage.children.splice(i, 1);
                break;
            }
        }


        console.log("stage:" + stage.children.length)
        console.log("jtopoLayer:" + jtopoLayer.children.length)
        jtopoLayer.removeChilds(jtopoLayer.children)
        console.log("stage1:" + stage.children.length)
        console.log("jtopoLayer1:" + jtopoLayer.children.length)
        //jtopoLayer.removeAll()
        //console.log("length1:" + jtopoLayer.children.length)
        // for (let i = 0; i < jtopoLayer.children.length; i++) {
        //     console.log("length:" + jtopoLayer.children.length)
        // }
        nodes = []
        links = []
        JtopoRender()
    },5000)

    window.onload = function() {
        setTimeout(function (){
            // 清除 Layer 中的所有元素
            let data = window.myData

            //先创建节点
            for (let i = 0; i < data.length; i++) {
                let img = ""
                if (data[i].dbType === 'MySQL') {
                    img = ctxPath + 'images/db/mysql-small.png';
                }
                if (data[i].dbType === 'Oracle') {
                    img = ctxPath + 'images/db/oracle-small.png';
                }
                if (data[i].dbType === 'Redis') {
                    img = ctxPath + 'images/db/redis-small.png';
                }
                if (data[i].dbType === 'Mongo') {
                    img = ctxPath + 'images/db/mongo-small.png';
                }
                createNode(data[i].nodeX, data[i].nodeY, img, data[i].fromNode, data[i].text)
                console.log("创建节点:" + data[i].fromNode)
            }

            //创建节点中的link。连线
            for (let i = 0; i < data.length; i++) {
                let fromNode = getNode(data[i].fromNode)
                for (let j = 0; j < data[i].links.length; j++) {
                    let toNode = getNode(data[i].links[j].toNode)
                    linkNode(fromNode, toNode, data[i].links[j].linkText,
                        data[i].links[j].linkType, data[i].links[j].linkColor, data[i].links[j].effects)
                }
            }

            // 页面加载完成后执行的代码
            jtopoLayer.addChilds(nodes);
            jtopoLayer.addChilds(links);
            stage.show();
        },1000)
    };
</script>

</body>
</html>